<template>
  <q-table
    class="cimo-shadow"
    :grid="$q.screen.xs"
    title="Treats"
    :data="data"
    :columns="columns"
    :filter="filter"
    row-key="name"
    style="height: 430px;"
  >
    <template v-slot:top-right>
      <q-input dense debounce="300" v-model="filter" placeholder="Search">
        <template v-slot:append>
          <q-icon name="search"/>
        </template>
      </q-input>
    </template>
    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td key="name" :props="props">{{ props.row.name }}</q-td>
        <q-td key="calories" :props="props">{{ props.row.calories }}</q-td>
        <q-td key="fat" :props="props">{{ props.row.fat }}</q-td>
        <q-td key="carbs" :props="props">{{ props.row.carbs }}</q-td>
        <q-td key="operating" :props="props">
          <q-btn class="btn-table text-white" icon="tune" label="详情" @click="handleTableClick(props.row)"/>
        </q-td>
      </q-tr>
    </template>
  </q-table>
</template>

<script>
  export default {
    name: 'index',
    data(){
      return{
        filter: '',
        columns: [
          {
            name: 'name',
            required: true,
            label: 'Dessert (100g serving)',
            align: 'left',
            field: row => row.name,
            format: val => `${val}`,
            sortable: true
          },
          {
            name: 'calories',
            align: 'center',
            label: 'Calories',
            field: 'calories',
            sortable: true
          },
          {
            name: 'fat',
            label: 'Fat (g)',
            field: 'fat',
            sortable: true
          },
          {
            name: 'carbs',
            label: 'Carbs (g)',
            field: 'carbs'
          },
          {
            name: 'operating',
            label: 'operating',
            align: 'center',
            field: 'operating',
            sortable: true
          }
        ],
        data: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .btn-table {
    background: linear-gradient(to right, #36d1dc, #5b86e5);
    transition: all 0.3s ease-in-out;
  }

  .btn-table:hover {
    background-position: right center;
    box-shadow: 0 12px 20px -11px #5b86e5;
  }
</style>
